<template>
  <div>
    <el-table
      :data="data"
      :border="true"
      :header-cell-class-name="$style.tableHeaderCell"
      v-loading="loading"
      tooltip-effect="dark"
      style="width: 100%"
      ref="cellularStoreTable"
    >
      <el-table-column align="center" min-width="100px" prop="topChannelCode" label="顶级渠道"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="city" label="城市" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" min-width="100px" prop="company" label="分公司"></el-table-column>
      <el-table-column align="center" min-width="150px" prop="cellularName" label="蜂窝"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="cellularCode" label="蜂窝编码"></el-table-column>
      <el-table-column align="center" min-width="120px" prop="cellularStoreNum" label="蜂窝益丰门店数" show-overflow-tooltip>
        <template slot-scope="scope">
          <!-- 调接口获取数据 -->
          <div style="cursor:pointer;text-decoration:underline" @click="onOpenCellularStoreList(scope.row)">
            {{ scope.row.cellularStoreNum }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100px" prop="competeStoreNum" label="竞对门店数"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="marketRate" label="蜂窝市占率"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="cellularClassify" label="蜂窝类型">
        <template slot-scope="scope">{{ transfromCellularClassify(scope.row.cellularClassify) }} </template>
      </el-table-column>
      <el-table-column align="center" min-width="100px" prop="capacityLevel" label="蜂窝容量"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="cellularPriority" label="调价优先级"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="topValue" label="蜂窝参考竞对"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="calcTime" label="数据更新时间">
        <template slot-scope="scope">
          {{ scope.row.calcTime === undefined ? null : formatCalcTime(scope.row.calcTime) }}
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100px" prop="creator" label="创建人"></el-table-column>
      <el-table-column align="center" min-width="190px" prop="lastModify" label="修改时间">
        <template slot-scope="scope">
          {{ formatLastModify(scope.row.lastModify) }}
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="90px" prop="autoPrice" label="自动调价">
        <template slot-scope="scope">
          {{ scope.row.autoPrice === 'Y' ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="150px" prop="" label="操作" fixed="right">
        <template slot-scope="scope">
          <div :class="$style.btns">
            <el-button type="text" @click="onModify(scope.row)">修改</el-button>
            <el-popover placement="top" width="160" trigger="click" :ref="`popover-${scope.$index}`">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">取消</el-button>
                <el-button type="text" size="mini" @click="onComfirmDelete(scope)" v-loading="isDeletingCellularRow">确定</el-button>
              </div>
              <el-button slot="reference" type="text">删除</el-button>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div :class="$style.tablePagination">
      <el-pagination
        @size-change="onPageSizeChange"
        @current-change="onPageNumChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 50]"
        :page-size="pageSize"
        layout="total, prev, pager, next, sizes"
        :total="total"
      />
    </div>
    <cellular-store-modal
      :visible="cellularStoreVisible"
      @close="onCloseCellularStoreList"
      :cellularStores="cellularStores"
      :loading="tableLoading"
      @deleteStore="onDeleteStore"
      :deleting="deleting"
    ></cellular-store-modal>
  </div>
</template>
<style lang="scss" module>
@import './index.module.scss';
</style>

<script>
import Index from './index';
export default Index;
</script>
